import React from 'react'
import { Steps } from 'antd'
import { useHistory } from 'react-router-dom'
const { Step } = Steps

interface myProps {
    current: number
}

const steps:{title:string, route:string}[] = [
  { title: '登录', route: '/login' },
  { title: '填写收货地址', route: '/shipping' },
  { title: '选择支付方式', route: '/payment' },
  { title: '确认订单', route: '/confirm-order' },
]

const CheckoutSteps = ({ current }:myProps) => {
  const history = useHistory()
  const onClickStep = (e:number) => {
    if (e < current) {
      history.push(steps[ e ].route)
    }
  }

  return (
    <Steps
      current={current}
      onChange={onClickStep}
      progressDot
      size="small"
    >
      {steps.map((step, i) => (
        <Step
          disabled={i > current}
          key={step.route}
          title={step.title}
        />
      ))}
    </Steps>
  )
}

export default CheckoutSteps
